<template>
  <div>
    <nav-bar>
      <template v-slot:default>用户登录</template>
    </nav-bar>
    <div style="padding-top: 50px;">
      <van-image
          width="10rem"
          height="5rem"
          fit="contain"
          src="https://ccidcdn.wkjc.cn/Fm1gFNCKS8Mhs8vVMRjzPqVhA4C2.png"
      />
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field
            v-model="email"
            name="邮箱"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请填写正确的邮箱格式' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <div class="link-login" @click="$router.push({path:'/register'})">
            没有账号，去注册
          </div>
          <van-button round block type="info" color="#42b983" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import {ref,reactive,toRefs} from "vue";
import {login} from "network/user";
import { Notify,Toast } from 'vant';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
export default {
  name: "Login",
  components:{
    NavBar
  },
  setup(){
    const store = useStore();
    const router = useRouter();
    const userinfo = reactive({
      email:'',
      password:''
    })
    const onSubmit = () =>{
        login(userinfo).then(res=>{
          // console.log(res);
          window.localStorage.setItem('token',res.access_token);
          // 在vuex isLogin
          store.commit('setIsLogin',true)
          Toast.success('登录成功');
          userinfo.email = '';
          userinfo.password = '';
          setTimeout(()=>{
            router.go(-1);
          },500)
        })
    }
    return{
      ...toRefs(userinfo),
      onSubmit
    }
  }
}
</script>

<style scoped>
  .link-login{
    font-size: 16px;
    padding-bottom: 20px;
    color: #42b983;
    display: inline-block;
  }
</style>